@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

:root{
    --bg-primary:#aa4a2b;
    --shadow-primary:#7a361f;
    --white-color: white;
    --smokewhite-color: whitesmoke;
    --border-color-white: #f3f4f6;
    --secondary-btn-color:#9333EA;
    --light-gray-color: rgb(216, 216, 216);
}

*{
    color:black;
    font-family: 'Open Sans', sans-serif;
}
body{
    background-color: var(--white-color);
}
.flex{
    display: flex;
}

.right{
    margin-left:auto;
    
}

.center{
    justify-content:center;
    align-items:center;
}

.gutter-vertical{
    width: 2rem;
}

.padding-t1{
    padding-top: 1rem;
}

.padding-t2{
    padding-top: 2rem;
}

.strike{
    text-decoration-line:line-through ;
}

.font-light{
    font-weight:light;
    color: var(--gray-color);
}

.light-rule{
    color:var(--border-color-white);
}
/* header styles */
.nav-bar{
    background-color:var(--bg-primary);
    padding-right: 2rem;
}

.nav-link{
    color: var(--smokewhite-color);
    padding:0.6rem;
}

.nav-head{
    font-size: 1.8rem;
    align-self: flex-start;
}

.nav-sm{
    font-size: 1.8rem;
    color: var(--white-color);
    padding: 0rem;
    margin-top:0.5rem;
}

.btn-2-scale{
    background-color: var(--white-color);
    color:var(--bg-primary);
}
.med{
    color: var(--white-color);
    font-size: 2.4rem;
}

.med-ham{
    color:var(--smokewhite-color);
}

.shadow{
    box-shadow: 5px 5px 5px var(--shadow-primary);
}
.badge-wrap:hover{
    transform: scale(1.1,1.1);
    transition: 260ms;
}
.head-container-1{
    width:20%;
}
.head-container-2{
    width:80%;
}

.search-container{
    flex:1;
}

.search-bar{
    background-color: var(--smokewhite-color);
    position:relative;
}

.search-bar .input-icon{
    position:absolute;
    width:100%; 
    color:var(--shadow-primary);
    right:0;
    max-width: 2rem;
    padding:0.5rem;
}
.search-input{
    width:100%; 
    font-size:1rem;
    height: 2rem;
    width: 20rem;
    border:none;
    background-color: var(--smokewhite-color);
    padding: 0.2rem 1rem;
    align-self: center;
}

.hamburger-dropdown-content{
    display: none;
    background-color: var(--bg-primary);
    position:absolute;
    z-index: 1;
    min-width: 160px;
}

.dropdown-nav-link{
    color:var(--white-color);
}

.dropdown-nav-link:hover{
    transform:scale(1.1,1.1);
}

.home-heading{
    position:absolute;
    width:100%;
    font-size: 2rem;
    padding: 1.5rem;
    background-color:var(--bg-light);
    opacity:70%;
    z-index:1;
}

.back{
    position:absolute;
    opacity:90%;
    z-index:-1;
}

.card-holder{
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
    justify-content: space-around;
    align-items: center;
    
}

.main-container{
    background-color:var(--bg-primary);
    padding-bottom: 1rem;
}
@media screen and (max-width: 860px) {
    .hide{
        display: none;
    }
}